import { render } from "@openinula/next";
import "./index.css";
import "./colors.css";
import Button from "./components/button/demo.jsx";
import Icon from "./components/icon/demo.jsx";
import Checkbox from "./components/checkbox/demo.jsx";
import Switch from "./components/switch/demo.jsx";
import Radio from "./components/radio/demo.jsx";
import Tooltip from "./components/tooltip/demo.jsx";
import Notification from "./components/notification/demo.jsx";
import Spin from "./components/spin/demo.jsx";
import Card from "./components/card/demo.jsx";
import Tabs from "./components/tabs/demo.jsx";
import Tree from "./components/tree/demo.jsx";
window.render = render;
import Select from "./components/select/demo.jsx";
import Input from "./components/input/demo.jsx";
import Modal from "./components/modal/demo.jsx";
import DatePicker from "./components/datepicker2/demo.jsx";
import Form from "./components/form/demo.jsx";
import Tag from "./components/tag/demo.jsx";
import { createHashRouter } from "./route.js";

// button demos
import ButtonDemo1 from "./components/button/demos/demo1.jsx";
import ButtonDemo2 from "./components/button/demos/demo2.jsx";
import ButtonDemo3 from "./components/button/demos/demo3.jsx";
import ButtonDemo4 from "./components/button/demos/demo4.jsx";
import ButtonDemo5 from "./components/button/demos/demo5.jsx";
import ButtonDemo6 from "./components/button/demos/demo6.jsx";

// card demos
import CardDemo1 from "./components/card/demos/demo1.jsx";
import CardDemo2 from "./components/card/demos/demo2.jsx";
import CardDemo3 from "./components/card/demos/demo3.jsx";
import CardDemo4 from "./components/card/demos/demo4.jsx";
import CardDemo5 from "./components/card/demos/demo5.jsx";

// checkbox demos
import CheckboxDemo1 from "./components/checkbox/demos/demo1.jsx";
import CheckboxDemo2 from "./components/checkbox/demos/demo2.jsx";
import CheckboxDemo3 from "./components/checkbox/demos/demo3.jsx";

// form demos
import FormDemo1 from "./components/form/demos/demo1.jsx";
import FormDemo2 from "./components/form/demos/demo2.jsx";
import FormDemo3 from "./components/form/demos/demo3.jsx";
import FormDemo4 from "./components/form/demos/demo4.jsx";
import FormDemo5 from "./components/form/demos/demo5.jsx";
import FormDemo6 from "./components/form/demos/demo6.jsx";
import FormDemo7 from "./components/form/demos/demo7.jsx";

// icon demos
import IconDemo1 from "./components/icon/demos/demo1.jsx";
import IconDemo2 from "./components/icon/demos/demo2.jsx";
import IconDemo3 from "./components/icon/demos/demo3.jsx";
import IconDemo4 from "./components/icon/demos/demo4.jsx";
import IconDemo5 from "./components/icon/demos/demo5.jsx";
import IconDemo6 from "./components/icon/demos/demo6.jsx";

// input demos
import InputDemo1 from "./components/input/demos/demo1.jsx";
import InputDemo2 from "./components/input/demos/demo2.jsx";
import InputDemo3 from "./components/input/demos/demo3.jsx";
import InputDemo4 from "./components/input/demos/demo4.jsx";
import InputDemo5 from "./components/input/demos/demo5.jsx";
import InputDemo6 from "./components/input/demos/demo6.jsx";
import InputDemo7 from "./components/input/demos/demo7.jsx";
import InputDemo8 from "./components/input/demos/demo8.jsx";
import InputDemo9 from "./components/input/demos/demo9.jsx";

// modal demos
import ModalDemo1 from "./components/modal/demos/demo1.jsx";
import ModalDemo2 from "./components/modal/demos/demo2.jsx";
import ModalDemo3 from "./components/modal/demos/demo3.jsx";
import ModalDemo4 from "./components/modal/demos/demo4.jsx";
import ModalDemo5 from "./components/modal/demos/demo5.jsx";
import ModalDemo6 from "./components/modal/demos/demo6.jsx";
import ModalDemo7 from "./components/modal/demos/demo7.jsx";

// notification demos
import NotificationDemo1 from "./components/notification/demos/demo1.jsx";
import NotificationDemo2 from "./components/notification/demos/demo2.jsx";
import NotificationDemo3 from "./components/notification/demos/demo3.jsx";
import NotificationDemo4 from "./components/notification/demos/demo4.jsx";
import NotificationDemo5 from "./components/notification/demos/demo5.jsx";

// radio demos
import RadioDemo1 from "./components/radio/demos/demo1.jsx";
import RadioDemo2 from "./components/radio/demos/demo2.jsx";
import RadioDemo3 from "./components/radio/demos/demo3.jsx";
import RadioDemo4 from "./components/radio/demos/demo4.jsx";
import RadioDemo5 from "./components/radio/demos/demo5.jsx";
import RadioDemo6 from "./components/radio/demos/demo6.jsx";

// select demos
import SelectDemo1 from "./components/select/demos/demo1.jsx";
import SelectDemo2 from "./components/select/demos/demo2.jsx";
import SelectDemo3 from "./components/select/demos/demo3.jsx";
import SelectDemo4 from "./components/select/demos/demo4.jsx";
import SelectDemo5 from "./components/select/demos/demo5.jsx";
import SelectDemo6 from "./components/select/demos/demo6.jsx";
import SelectDemo7 from "./components/select/demos/demo7.jsx";
import SelectDemo8 from "./components/select/demos/demo8.jsx";

// spin demos
import SpinDemo1 from "./components/spin/demos/demo1.jsx";
import SpinDemo2 from "./components/spin/demos/demo2.jsx";
import SpinDemo3 from "./components/spin/demos/demo3.jsx";
import SpinDemo4 from "./components/spin/demos/demo4.jsx";
import SpinDemo5 from "./components/spin/demos/demo5.jsx";

// switch demos
import SwitchDemo1 from "./components/switch/demos/demo1.jsx";
import SwitchDemo2 from "./components/switch/demos/demo2.jsx";
import SwitchDemo3 from "./components/switch/demos/demo3.jsx";
import SwitchDemo4 from "./components/switch/demos/demo4.jsx";

// tabs demos
import TabsDemo1 from "./components/tabs/demos/demo1.jsx";
import TabsDemo2 from "./components/tabs/demos/demo2.jsx";
import TabsDemo3 from "./components/tabs/demos/demo3.jsx";
import TabsDemo4 from "./components/tabs/demos/demo4.jsx";
import TabsDemo5 from "./components/tabs/demos/demo5.jsx";
import TabsDemo6 from "./components/tabs/demos/demo6.jsx";
import TabsDemo7 from "./components/tabs/demos/demo7.jsx";
import TabsDemo8 from "./components/tabs/demos/demo8.jsx";
import TabsDemo9 from "./components/tabs/demos/demo9.jsx";
import TabsDemo10 from "./components/tabs/demos/demo10.jsx";
import TabsDemo11 from "./components/tabs/demos/demo11.jsx";

// tag demos
import TagDemo1 from "./components/tag/demos/demo1.jsx";
import TagDemo2 from "./components/tag/demos/demo2.jsx";
import TagDemo3 from "./components/tag/demos/demo3.jsx";
import TagDemo4 from "./components/tag/demos/demo4.jsx";

// tooltip demos
import TooltipDemo1 from "./components/tooltip/demos/demo1.jsx";
import TooltipDemo2 from "./components/tooltip/demos/demo2.jsx";
import TooltipDemo3 from "./components/tooltip/demos/demo3.jsx";

//datepicker demos
import DatePickerDemo1 from "./components/datepicker2/demos/demo1.jsx";
import DatePickerDemo2 from "./components/datepicker2/demos/demo2.jsx";
import DatePickerDemo3 from "./components/datepicker2/demos/demo3.jsx";
import DatePickerDemo4 from "./components/datepicker2/demos/demo4.jsx";
import DatePickerDemo5 from "./components/datepicker2/demos/demo5.jsx";
import DatePickerDemo6 from "./components/datepicker2/demos/demo6.jsx";
import DatePickerDemo7 from "./components/datepicker2/demos/demo7.jsx";
import DatePickerDemo8 from "./components/datepicker2/demos/demo8.jsx";

//tree demos
import TreeDemo1 from "./components/tree/demos/demo1.jsx";
import TreeDemo2 from "./components/tree/demos/demo2.jsx";
import TreeDemo3 from "./components/tree/demos/demo3.jsx";
import TreeDemo4 from "./components/tree/demos/demo4.jsx";
import TreeDemo5 from "./components/tree/demos/demo5.jsx";

window.render = render;

const routes = {
  "/": () => (
    <div className="hero">
      {/* <h1 className="hero-title animate__animated animate__fadeInDown">欢迎使用 inula-next 组件库!</h1> */}
      {/* <p className="hero-subtitle animate__animated animate__fadeInUp">请选择一个组件查看示例</p> */}
      {/* <div className="hero-content" style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
        <a href="#/button">Button</a>
        <a href="#/icon">Icon</a>
        <a href="#/checkbox">Checkbox</a>
        <a href="#/switch">Switch</a>
        <a href="#/radio">Radio</a>
        <a href="#/tooltip">Tooltip</a>
        <a href="#/notification">Notification</a>
        <a href="#/spin">Spin</a>
        <a href="#/card">Card</a>
        <a href="#/tabs">Tabs</a>
        <a href="#/tree">Tree</a>
        <a href="#/select">Select</a>
        <a href="#/input">Input</a>
        <a href="#/modal">Modal</a>
        <a href="#/datepicker">DatePicker</a>
        <a href="#/form">Form</a>
        <a href="#/tag">Tag</a>
      </div> */}
    </div>
  ),
  "/button": Button,
  "/button/demo1": ButtonDemo1,
  "/button/demo2": ButtonDemo2,
  "/button/demo3": ButtonDemo3,
  "/button/demo4": ButtonDemo4,
  "/button/demo5": ButtonDemo5,
  "/button/demo6": ButtonDemo6,
  "/icon": Icon,
  "/icon/demo1": IconDemo1,
  "/icon/demo2": IconDemo2,
  "/icon/demo3": IconDemo3,
  "/icon/demo4": IconDemo4,
  "/icon/demo5": IconDemo5,
  "/icon/demo6": IconDemo6,
  "/checkbox": Checkbox,
  "/checkbox/demo1": CheckboxDemo1,
  "/checkbox/demo2": CheckboxDemo2,
  "/checkbox/demo3": CheckboxDemo3,
  "/switch": Switch,
  "/switch/demo1": SwitchDemo1,
  "/switch/demo2": SwitchDemo2,
  "/switch/demo3": SwitchDemo3,
  "/switch/demo4": SwitchDemo4,
  "/radio": Radio,
  "/radio/demo1": RadioDemo1,
  "/radio/demo2": RadioDemo2,
  "/radio/demo3": RadioDemo3,
  "/radio/demo4": RadioDemo4,
  "/radio/demo5": RadioDemo5,
  "/radio/demo6": RadioDemo6,
  "/tooltip": Tooltip,
  "/tooltip/demo1": TooltipDemo1,
  "/tooltip/demo2": TooltipDemo2,
  "/tooltip/demo3": TooltipDemo3,
  "/notification": Notification,
  "/notification/demo1": NotificationDemo1,
  "/notification/demo2": NotificationDemo2,
  "/notification/demo3": NotificationDemo3,
  "/notification/demo4": NotificationDemo4,
  "/notification/demo5": NotificationDemo5,
  "/spin": Spin,
  "/spin/demo1": SpinDemo1,
  "/spin/demo2": SpinDemo2,
  "/spin/demo3": SpinDemo3,
  "/spin/demo4": SpinDemo4,
  "/spin/demo5": SpinDemo5,
  "/card": Card,
  "/card/demo1": CardDemo1,
  "/card/demo2": CardDemo2,
  "/card/demo3": CardDemo3,
  "/card/demo4": CardDemo4,
  "/card/demo5": CardDemo5,
  "/tabs": Tabs,
  "/tabs/demo1": TabsDemo1,
  "/tabs/demo2": TabsDemo2,
  "/tabs/demo3": TabsDemo3,
  "/tabs/demo4": TabsDemo4,
  "/tabs/demo5": TabsDemo5,
  "/tabs/demo6": TabsDemo6,
  "/tabs/demo7": TabsDemo7,
  "/tabs/demo8": TabsDemo8,
  "/tabs/demo9": TabsDemo9,
  "/tabs/demo10": TabsDemo10,
  "/tabs/demo11": TabsDemo11,
  "/tree": Tree,
  "/tree/demo1": TreeDemo1,
  "/tree/demo2": TreeDemo2,
  "/tree/demo3": TreeDemo3,
  "/tree/demo4": TreeDemo4,
  "/tree/demo5": TreeDemo5,
  "/select": Select,
  "/select/demo1": SelectDemo1,
  "/select/demo2": SelectDemo2,
  "/select/demo3": SelectDemo3,
  "/select/demo4": SelectDemo4,
  "/select/demo5": SelectDemo5,
  "/select/demo6": SelectDemo6,
  "/select/demo7": SelectDemo7,
  "/select/demo8": SelectDemo8,
  "/input": Input,
  "/input/demo1": InputDemo1,
  "/input/demo2": InputDemo2,
  "/input/demo3": InputDemo3,
  "/input/demo4": InputDemo4,
  "/input/demo5": InputDemo5,
  "/input/demo6": InputDemo6,
  "/input/demo7": InputDemo7,
  "/input/demo8": InputDemo8,
  "/input/demo9": InputDemo9,
  "/modal": Modal,
  "/modal/demo1": ModalDemo1,
  "/modal/demo2": ModalDemo2,
  "/modal/demo3": ModalDemo3,
  "/modal/demo4": ModalDemo4,
  "/modal/demo5": ModalDemo5,
  "/modal/demo6": ModalDemo6,
  "/modal/demo7": ModalDemo7,
  "/datepicker": DatePicker,
  "/form": Form,
  "/form/demo1": FormDemo1,
  "/form/demo2": FormDemo2,
  "/form/demo3": FormDemo3,
  "/form/demo4": FormDemo4,
  "/form/demo5": FormDemo5,
  "/form/demo6": FormDemo6,
  "/form/demo7": FormDemo7,
  "/tag": Tag,
  "/tag/demo1": TagDemo1,
  "/tag/demo2": TagDemo2,
  "/tag/demo3": TagDemo3,
  "/tag/demo4": TagDemo4,
  "/datepicker": DatePicker,
  "/datepicker/demo1": DatePickerDemo1,
  "/datepicker/demo2": DatePickerDemo2,
  "/datepicker/demo3": DatePickerDemo3,
  "/datepicker/demo4": DatePickerDemo4,
  "/datepicker/demo5": DatePickerDemo5,
  "/datepicker/demo6": DatePickerDemo6,
  "/datepicker/demo7": DatePickerDemo7,
  "/datepicker/demo8": DatePickerDemo8,
};

const router = createHashRouter(routes);

function App() {
  const Active = (router.current && router.current.component) || routes["/"];

  return (
    <div className="container">
      {/* <div style={{ padding: '12px 0', display: 'flex', flexWrap: 'wrap', gap: 12 }}>
        <a href="#/">首页</a>
        <a href="#/button">Button</a>
        <a href="#/icon">Icon</a>
        <a href="#/checkbox">Checkbox</a>
        <a href="#/switch">Switch</a>
        <a href="#/radio">Radio</a>
        <a href="#/tooltip">Tooltip</a>
        <a href="#/notification">Notification</a>
        <a href="#/spin">Spin</a>
        <a href="#/card">Card</a>
        <a href="#/tabs">Tabs</a>
        <a href="#/tree">Tree</a>
        <a href="#/select">Select</a>
        <a href="#/input">Input</a>
        <a href="#/modal">Modal</a>
        <a href="#/datepicker">DatePicker</a>
        <a href="#/form">Form</a>
        <a href="#/tag">Tag</a>
      </div> */}
      <div className="hero">
        <Active />
      </div>
    </div>
  );
}

const root = document.getElementById("root");
function mount() {
  render(<App />, root);
}
router.onChange(mount);
mount();
